<template>
    <div>
        <h1>创建一个新的报名表</h1>
        <el-form ref="form" :model="form" label-width="12%">
            <el-form-item 
                label="报名表名称"
                prop="title"                                    
                :rules="{
                    required: true, message: '项目名不能为空', trigger: 'blur'                                
                }"
            >
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="报名说明">
                <el-input type="textarea" v-model="form.info"></el-input>
            </el-form-item>
            <el-form-item label="报名截止日期">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>


            <el-card class="box-card form-item-card"
                v-for="(formObj, index) in form.struct"
                :key="formObj.key"
                :label="'项目' + ( index + 1 )"
                >
                <div slot="header" class="clearfix">
                    <el-radio-group v-model="formObj.type" size="medium">
                        <el-radio-button label="文本项" ></el-radio-button>
                        <el-radio-button label="单选项"></el-radio-button>
                        <el-radio-button label="多选项"></el-radio-button>
                    </el-radio-group>
                    <el-button @click.prevent="removeFormObj(formObj)" style="float: right; padding: 3px 0;" type="text"><i class="el-icon-close"></i></el-button>
                </div>
                <div class="text item">
                    <el-form-item label="项目名称"
                        :prop="'struct.' + index + '.title'"                                    
                        :rules="{
                            required: true, message: '项目名不能为空', trigger: 'blur'                                
                        }"
                        >
                        <el-input v-model="formObj.title"></el-input>
                    </el-form-item>

                    <el-form-item
                        v-if="formObj.type==='单选项' || formObj.type==='多选项'"
                        v-for="(option, index2) in formObj.options"
                        :label="'子项目' + ( index2 + 1 )"
                        :key="option.key"
                        :prop="'struct.' + index + '.options.' + index2 + '.value'"
                        :rules="{
                            required: true, message: '项目名不能为空', trigger: 'blur'
                        }"
                        >
                        <el-input v-model="option.value"></el-input><el-button @click.prevent="removeOption(formObj, option)">删除</el-button>
                    </el-form-item>
                    
                    <el-form-item
                        v-if="formObj.type==='单选项' || formObj.type==='多选项'"                    
                        >
                        <el-button type="primary" @click="addOption(formObj.options)">添加子项</el-button>
                        <!-- <el-button @click="resetForm('formObj')">重置</el-button> -->
                    </el-form-item>

                </div>
            </el-card>

            <el-button class="add-form-button" type="primary" @click="addFormObj"><i class="el-icon-plus"></i> 添加项目</el-button>

            <el-form-item>
                <el-button class="submit-form-button" type="primary" @click="onSubmit('form')">立即创建</el-button>
                <!-- <el-button>取消</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

  export default {
    data() {
      return {
        form: {
            "title": "",
            "info": "",
            "struct": [
                {
                    "title": "",
                    "type": "文本项",
                    "options":[{
                        "value": ''
                    }]
                }
            ]
        }
      }
    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post(this.customConfig.apiServerUrl + this.customConfig.apiPrefix + "/table/" , {
                        "table": {
                            "tableId": "123450",
                            "title": this.form.title,
                            "info": this.form.info,
                            "struct": this.form.struct,
                            "hits": "123"
                        }
                    })
                    .then(function (response) {
                        console.log(response.data.table.id);
                        window.location.href='/table/'+ response.data.table.id + "/admin";
                    })
                    .catch(function (error) {
                        console.log(error);
                        alert(error);
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addFormObj() {
            this.form.struct.push({
                "title": "",
                "type": "文本项",
                "options":[{
                    "value": ''
                }],
                "key":Date.now()
            })
        },
        removeFormObj(formObj) {
            var index = this.form.struct.indexOf(formObj)
            if (index !== -1) {
                this.form.struct.splice(index, 1)
            }
        },
        addOption(options) {
            options.push({
                    "value": '',
                    "key":Date.now()
                })
        },
        removeOption(formObj, option) {
            var index = formObj.options.indexOf(option)
            if (index !== -1) {
                formObj.options.splice(index, 1)
            }
        },
    }
  }
</script>


<style lang="less" scoped>
    .form-item-card {
        margin-bottom: 24px;
    }
    .add-form-button {
        margin-bottom: 24px;        
        width: 100%;
    }
    .submit-form-button {
        margin-top: 8px;
    }
</style>
